<style lang="less">
@import "./login.less";
</style>

<template>
  <div class="login">
    <div style="height: 10%;"></div>
    <div class="login-form-title">
 
     {{systemname}}
    </div>
    <div class="login-form-con">

      <div>
        <div class="login-form-subtitle">欢迎登录</div>
        <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
          <FormItem prop="Account">
            <Input class="input-login" size="large" v-model="form.Account" placeholder="请输入用户名">

            </Input>
          </FormItem>
          <FormItem prop="Password">
            <Input size="large" type="password" v-model="form.Password" placeholder="请输入密码">

            </Input>
          </FormItem>


          <FormItem prop="Code">
            <Row :wrap="false">

              <Col flex="auto">
              <Input size="large" v-model="form.Code" placeholder="请输入验证码">


              </Input>
              </Col>
              <Col flex="none">
              <div><img class="login-img-code" @click="getCaptcha()" :src="CodeImageBase64" alt="5分钟内有效"></img></div>
              </Col>
            </Row>


          </FormItem>
          <FormItem>
            <Button size="large" @click="handleSubmit" :loading="loading" type="primary" long>登录</Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <div>

    </div>
    
    <div class="login-footer"><div><a style="color: #ffffff;" target="_blank" href="https://beian.miit.gov.cn/">鲁ICP备2021032857号-1</a></div> {{ copyright }}</div>

  </div>
</template>

<script>

import { title, copyright, systemname } from '@/libs/util'
import { getCaptcha } from '@/api/rbac'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      title,
      copyright,
      systemname,
      modalTenant: false,
      loading: false,
      CodeImageBase64: '',
      tenantId: '',
      form: {
        Account: '',
        Password: '',
        Code: '',
        CodeKey: '',
        TenantId: 0
      },
      rules: {
        Account: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        Password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        Code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['handleLogin', 'GetUserInfo']),
    getCaptcha() {
      getCaptcha().then((res) => {
        if (res.StatusCode == 200) {
          this.CodeImageBase64 = res.Data.CodeImageBase64
          this.form.CodeKey = res.Data.Key
        } else {
          this.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    handleSubmit() {
      let vm = this

      vm.form.TenantId = Number(vm.tenantId)
      vm.$refs['loginForm'].validate((valid) => {
        if (valid) {
          vm.loading = true
          vm.handleLogin(vm.form)
            .then((res) => {
              vm.loading = false
              if (res.StatusCode == 200) {
                vm.$router.push({
                  name: 'home'
                })
              } else {
                vm.getCaptcha()
              }
            })
            .catch(() => {
              vm.loading = false
              vm.getCaptcha()
            })
        }
      })
    }

  },
  mounted() {
    this.getCaptcha()
  }
}
</script>

<style></style>
